<template>
  <div class="box">
    <!-- 搜索框 -->
    <div class="search-box">
      <input
        type="text"
        v-model="searchKey"
        placeholder="输入商户名或菜名"
        class="searchIpt"
        @keyup.enter="sureSearch"
        @input="search"
        autofocus="autofocus"
      />
      <button class="search-btn" @click="goBack">取消</button>
    </div>
    <!-- 搜索结果显示框 -->
    <!-- 显示最近搜索 -->
    <van-tabs v-model="activeName" title-active-color="#ee0a24" v-show="flag">
      <van-tab name="all">
        <div slot="title" class="font">
          <van-icon name="apps-o" />全部
        </div>

        <div class="content-detail">
          <div class="recently">
            <p>最近搜索</p>
            <span class="detailInfo" v-for="(item, index) in recentlyList" :key="index">{{item}}</span>
          </div>
          <div class="discovery">
            <p>
              搜索发现
              <span>换一换</span>
            </p>
            <span
              class="detailInfo"
              v-for="(item, index) in recommentList"
              :key="index.id"
              @click="goDetail(item.id,item.distance)"
            >{{item.shopName}}</span>
          </div>
        </div>
      </van-tab>
      <van-tab name="comments">
        <div slot="title" class="font">
          <van-icon name="more-o" />点评
        </div>
        <div>暂未开发</div>
      </van-tab>
      <van-tab name="expert">
        <div slot="title" class="font">
          <van-icon name="medal-o" />达人
        </div>
        <div>暂未开发</div>
      </van-tab>
    </van-tabs>
    <!-- 显示搜索预览 -->
    <div class="searchRes" v-show="flag2">
      <div class="keys">
        <p>
          <img src="../assets/icon/shijian@2x.png" alt />
          <span>{{searchKey}}</span>
        </p>
        <span class="count">约{{searchCount}}个结果</span>
      </div>
      <div class="rank">
        <p>
          <img src="../assets/icon/椭圆1@2x.png" alt />
          <span>{{searchKey}}</span>
          排行榜
        </p>
        <span class="count">约{{searchCount}}个结果</span>
      </div>
      <ul>
        <li v-for="(item, index) in searchList" :key="item.id">
          <div>
            <p>
              <img src="../assets/icon/dianpu拷贝2@2x.png" alt />
              <span v-html="item.shop_name"></span>
            </p>
            <van-rate v-model="item.total_start" size="14px" />
            <span class="count">{{item.total_comment}}条</span>
          </div>
          <p class="address">
            {{item.tag + ' ' + item.shop_addr}}
            <span>{{item.distance}}</span>
          </p>
        </li>
      </ul>
    </div>
    <!-- 显示搜索列表 -->
    <div class="content-list" v-show="flag3">
      <van-tabs v-model="activeName" title-active-color="#ee0a24">
        <van-tab name="all">
          <div slot="title" class="font">
            <van-icon name="apps-o" />全部
          </div>
          <div>
            <van-dropdown-menu>
              <van-dropdown-item v-model="value1" :options="option1" />
              <van-dropdown-item v-model="value2" :options="option2" />
              <van-dropdown-item v-model="value3" :options="option3" @change="changeRank" />
              <van-dropdown-item v-model="value4" :options="option4" @change="changeRank" />
            </van-dropdown-menu>
            <ul>
              <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <li
                  v-for="(item, index) in searchList"
                  :key="item.id"
                  @click="goDetail(item.id,item.distance)"
                >
                  <div class="img-box">
                    <img :src="item.img" />
                  </div>
                  <div class="info-box">
                    <p class="title" v-html="item.shop_name">
                      <span>卖</span>
                    </p>
                    <p class="rate-box">
                      <van-rate v-model="item.total_start" size="14px" />
                      <span class="count">{{item.total_comment}}条</span>
                      <span>¥{{item.shop_avg_price}}/人</span>
                    </p>
                    <p class="address">
                      <span class="addr-info">九里堤</span>
                      <span>{{item.tag}}</span>
                      <span class="distance">{{item.distance}}</span>
                    </p>
                    <p class="rank">
                      <span>94%认为口味赞</span>
                      <span>九里堤没事热门榜第10名</span>
                    </p>
                    <p class="msg">您最近偷偷「打探」过这家点哦！</p>
                    <p class="juan">
                      <span>卷</span>39.9元 价值50元的代金劵1张
                    </p>
                    <p class="tuan">
                      <span>团</span>39.9元 价值50元的代金劵1张
                    </p>
                  </div>
                </li>
              </van-list>
            </ul>
          </div>
        </van-tab>
        <van-tab name="comments">
          <div slot="title" class="font">
            <van-icon name="more-o" />点评
          </div>
          <div>暂未开发</div>
        </van-tab>
        <van-tab name="expert">
          <div slot="title" class="font">
            <van-icon name="medal-o" />达人
          </div>
          <div>暂未开发</div>
        </van-tab>
      </van-tabs>
    </div>
    <div id="allmap"></div>
  </div>
</template>


<script>
import { Toast } from "vant";
var timer = null;
export default {
  data() {
    return {
      flag: true,
      flag2: false,
      flag3: false,
      searchKey: "",
      activeName: "",
      recentlyList: [],
      searchCount: 0,
      option1: [{ text: "全部商品", value: 0 }],
      option2: [{ text: "全部分类", value: 0 }],
      option3: [
        { text: "筛选", value: "" },
        { text: "评分", value: "total_start" },
        { text: "价格", value: "shop_avg_price" },
        { text: "距离", value: "distance" }
      ],
      option4: [
        { text: "智能排序", value: "" },
        { text: "升序", value: "ASC" },
        { text: "降序", value: "DESC" }
      ],
      value1: 0,
      value2: 0,
      value3: "",
      value4: "",
      recommentList: [],
      pointlng: "0",
      pointlat: "0",
      searchList: [],
      pageNum: 1,
      loading: false,
      finished: false,
      totalPages: 0
    };
  },
  created() {
    var keys = window.sessionStorage.getItem("keys");
    if (keys) {
      keys = keys.split("/");
      this.recentlyList = keys;
    }
    this.getRecomment();
  },
  mounted() {
    // 调用接口获取百度定位地图
    var that = this;
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        that.pointlng = r.point.lng;
        that.pointlat = r.point.lat;
        console.log(r.point.lng, r.point.lat);
      } else {
        Toast("failed" + this.getStatus());
      }
    });
  },
  methods: {
    async sureSearch() {
      if (this.searchKey != "") {
        this.recentlyList.push(this.searchKey);
        this.recentlyList = [...new Set(this.recentlyList)];
        var keys = this.recentlyList.join("/");
        window.sessionStorage.setItem("keys", keys);
      }
      this.pageNum = 1
      this.flag = false;
      this.flag2 = false;
      this.flag3 = true;
      const { data: res } = await this.$http.get(
        `/Search/?keywords=${this.searchKey}&point=${this.pointlat},${this.pointlng}`
      );
      this.searchList = res.data.result.rows;
      this.finished = false
    },
    search() {
      this.pageNum = 1
      this.flag = false;
      this.flag3 = false;
      this.flag2 = true;
      if (this.searchKey == "") {
        this.flag = true;
        this.flag2 = false;
        this.flag3 = false;
      }
      // 发送数据获取预览信息
      clearTimeout(timer);
      timer = setTimeout(async () => {
        const { data: res } = await this.$http.get(
          `/Search/?keywords=${this.searchKey}&point=${this.pointlat},${this.pointlng}`
        );
        console.log(res);
        this.searchList = res.data.result.rows;
        console.log(this.searchList);
      }, 800);
      this.finished = false
    },
    goBack(e) {
      this.$router.go(-1);
    },
    async getRecomment() {
      const { data: res } = await this.$http.get("/shops/recommShop");
      console.log(res.data);

      this.recommentList = res.data;
    },
    async changeRank(val) {
      this.pageNum = 1
      console.log(this.value3, this.value4);
      const { data: res } = await this.$http.get(
        `/Search/?keywords=${this.searchKey}&point=${this.pointlat},${this.pointlng}&sortField=${this.value3}&sortRule=${this.value4}`
      );
      console.log(res);

      this.searchList = res.data.result.rows;
    },
    async onLoad() {
      this.pageNum += 1;
      const { data: res } = await this.$http.get(
        `/Search/?keywords=${this.searchKey}&point=${this.pointlat},${this.pointlng}&sortField=${this.value3}&sortRule=${this.value4}&pageNum=${this.pageNum}`
      );
      console.log(res);
      res.data.result.rows.forEach(item => {
        this.searchList.push(item);
      });
      console.log(this.searchList);
      this.loading = false;
      if (this.pageNum + 1 > res.data.result.totalPages) {
        this.finished = true;
      }
    },
    goDetail(id, distance) {
      this.$router.push("/info/" + id + "/" + distance);
    }
  }
};
</script>

<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box {
  font-size: 0.346667rem;
}
.searchIpt {
  height: 0.8rem;
  width: 7.466667rem;
  margin-top: 0.666667rem;
  font-size: 0.373333rem;
  color: #666;
  margin-left: 0.533333rem;
  border-radius: 0.4rem;
  border: none;
  box-shadow: 1px 1px 10px -5px #000;
  box-sizing: border-box;
  padding-left: 0.32rem;
}
.search-btn {
  height: 0.8rem;
  border: none;
  background-color: inherit;
  font-size: 0.373333rem;
  margin-left: 0.346667rem;
}
.van-tabs {
  font-size: 0.4rem;
  margin-top: 0.426667rem;
  .font {
    font-weight: 600;
    font-size: 0.426667rem;
  }
}
.content-detail {
  padding: 0 0.346667rem;
  p {
    color: #333;
    span {
      float: right;
      color: #fed760;
    }
  }
  .detailInfo {
    display: inline-block;
    background-color: #f5f5f5;
    padding: 0.186667rem;
    margin: 0.133333rem;
    border-radius: 0.266667rem;
  }
}
.recently {
  min-height: 2rem;
}
.van-icon {
  margin-right: 0.133333rem;
}
.searchRes {
  font-size: 0.4rem;
  padding: 0.373333rem;
  & > div {
    height: 1.2rem;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    p {
      margin: 0;
    }
  }
  ul {
    li {
      padding: 0.133333rem 0;
      border-bottom: 1px solid #ccc;
      align-items: center;
      & > div {
        border-bottom: 1px solid #eee;
        padding: 0.133333rem 0;
        p {
          margin: 0.133333rem 0;
        }
      }
    }
    img {
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 0.32rem;
    }
    p {
      margin: 0;
    }
    span.count,
    p.address {
      padding: 0.133333rem 0;
      font-size: 0.32rem;
      color: #9a9a9a;
    }
    .address span {
      float: right;
    }
  }
  .van-rate {
    margin-right: 0.426667rem;
  }
}
.keys,
.rank {
  display: flex;
  justify-content: space-between;
  img {
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.32rem;
  }
  p {
    span {
      color: #fecb2f;
    }
  }
  .count {
    color: #9a9a9a;
    font-size: 0.32rem;
  }
}

.content-list {
  ul,
  li,
  p {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: flex;
    border-top: 1px solid #ccc;
    padding: 0.32rem;
  }
  .img-box {
    width: 2.533333rem;
    height: 2.533333rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info-box {
    padding-left: 0.266667rem;
  }
  .title {
    font-size: 0.426667rem;
    font-weight: 600;
    span {
      font-size: 11px;
      background: #fecb2f;
      margin-left: 0.266667rem;
    }
  }
  .rate-box {
    margin: 0.213333rem 0;
    font-size: 0.32rem;
    .count {
      margin: 0 0.186667rem;
    }
  }
  .address {
    font-size: 0.32rem;
    color: #868686;
    .addr-info {
      margin-right: 0.213333rem;
    }
    .distance {
      float: right;
    }
  }
  .rank {
    font-size: 0.32rem;
    color: #868686;
    margin-bottom: 0.133333rem;
    span {
      margin: 0.133333rem 0.133333rem 0 0;
      border: 1px solid #eee;
    }
  }
  .msg,
  .juan,
  .tuan {
    font-size: 0.32rem;
    color: #868686;
    margin-bottom: 0.133333rem;
  }
  .juan span {
    background-color: #fe472f;
    padding: 0 0.133333rem;
    margin-right: 0.133333rem;
    color: #fff;
  }
  .tuan span {
    background-color: #fecb2f;
    padding: 0 0.133333rem;
    margin-right: 0.133333rem;
    color: #fff;
  }
}
.van-ellipsis,
.van-ellipsis {
  font-size: 0.4rem !important;
}
</style>